import {connect} from 'react-redux'
import React, {Component} from 'react'
import Header from "../components/header"
import {ArrayDataString} from "../utils/tools"
import  {loadawardDetail} from "../redux/actions/awardAction"
import { PullToRefresh,Toast } from 'antd-mobile'
class AwardCenterItemcontaniner extends Component {
  constructor (props){
   super(props)
   this.state= {
    pageNo:1,
    refreshing:false,
    height: document.documentElement.clientHeight
   }
}

    componentWillMount(){
        const {dispatch,match,award} = this.props
        const {key} = match.params
        const pageNo = 1
        const awarddetail = award.get("awarddetail")[key]
        const that = this;
        // pageNo==1 &&  !awarddetail &&
        dispatch(loadawardDetail(key,pageNo,function(){
          that.setState({pageNo:2})
        }))
    }
    
   render() {
         const {dispatch,match,award} = this.props
         const {key} = match.params
         const pageNo = this.state.pageNo
        //  console.log(pageNo,"12");
        const awarddetail = award.get("awarddetail")
        let awardlist = awarddetail[key]
      return <div className="awardcenteritem">
      <Header title={awardlist && awardlist[0].gameName} {...this.props}></Header>
          <div className="container">
            <ul className="awardlist">
            <li className="awardlisthead"><span>期数</span><span>时间</span><span>号码</span></li>
            <PullToRefresh
             ref={el => this.ptr = el}
              direction={'up'}
              refreshing={this.state.refreshing}
              style={{
                height: this.state.height,
                overflow: 'auto',
                paddingTop:"40px"
              }}
              onRefresh={() => {
                this.setState({ refreshing: true ,pageNo: pageNo+1});
                const that = this;
                Toast.loading("数据加载中")
                dispatch(loadawardDetail(key,pageNo, function(){
                  Toast.hide()
                  that.setState({ refreshing: false })
                }))
              }}
            >
              {awardlist && awardlist.map((item,index)=>{
                  return <li key={index}><span>{item.qs}</span>
                  <span>{ArrayDataString(item.openTime).map((item,i)=>{
                      return  <small key={i}>{item}</small>
                  })}</span><span>{item.openCode}</span></li>
              })}
               </PullToRefresh>
            </ul>

          </div>

      </div>
   } 
}

function mapStateToProps(state) {
  return {
    award: state.award
  }
}

export default connect(mapStateToProps)(AwardCenterItemcontaniner)